<template>
  <div class="container">
      <!-- toRefs是函数，转换响应式对象中所有属性为单独响应式数据，对象成为普通对象，并且值是关联的 -->
    <h5>toRefs</h5>
    <div>{{name}}</div>
    <div>{{age}}</div>
    <button @click="updateName">修改数据</button>
  </div>
</template>
<script>
import { reactive, toRef, toRefs } from "vue";
export default {
  name: "ApiTorefs",
  setup() {
    const obj = reactive({
      name: "张三",
      age: "18",
    });
    const obj3 = toRefs(obj);
    console.log(obj3);
    const updateName = () => {
      obj3.name.value = "lisi";
      //   obj.name = 'zs'
    };

    return { ...obj3, updateName };
  },
};
</script>